import React, { Component } from 'react'
import './index.css';
import Hero from '../Hero';
import YiYan from '../YiYan';
import Student from '../Student';
import Movie from '../Movie';
import Goods from '../Goods';
import { Route, BrowserRouter, NavLink, Redirect,Switch } from 'react-router-dom';
import Home from '../../pages/Home';
import About from '../../pages/About';
import Test from '../../pages/Test';
export default class App extends Component {
    render() {
        return (
            <div>
                {/* 标题 */}
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header">
                            <h2>React Router Demo</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    {/* 左侧菜单 */}
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            <NavLink exact to="/home"  activeClassName="active"  className="list-group-item">首页</NavLink>
                            <NavLink exact to="/about"  activeClassName="active"  className="list-group-item">关于我们</NavLink>
                        </div>
                    </div>
                    {/* 右侧内容 */}
                    <div class="col-xs-6">
                        <Route path="/home" component={Home} />
                        {/* 最左匹配原则  模糊匹配*/}
                        <Route exact path="/about" component={About} />
                        <Route exact path="/about/1" component={Test} />
                        <Route exact path="/about/2" component={Test} />
                    </div>
                </div>
            </div>
        )
    }

}
